import 'package:flutter/material.dart';

final Color backgroundColor = Color(0xff4a4a58);

class MenuDashboardPage  extends StatefulWidget {
  @override
  _MenuDashboardPageState createState() => _MenuDashboardPageState();
}

class _MenuDashboardPageState extends State<MenuDashboardPage> {
  bool isCollapsed=true;
  double screenWidth,screenHeight;
  final Duration duration = Duration(milliseconds: 300);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    screenHeight = size.height;
    screenWidth = size.width;
    return Scaffold(
        backgroundColor: backgroundColor,
        body: Stack(
          children: <Widget>[
            menu(context),
            dashboard(context)
          ],
        )
    );
  }

  Widget menu(context) {
    return Align(
        alignment: Alignment.centerLeft,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Dashboard',
                style: TextStyle(color: Colors.white, fontSize: 20)),
            SizedBox(height: 10.0),
            Text('Messages',
                style: TextStyle(color: Colors.white, fontSize: 20)),
            SizedBox(height: 10.0),
            Text('Utiltiy Bills',
                style: TextStyle(color: Colors.white, fontSize: 20)),
            SizedBox(height: 10.0),
            Text('Funds Transfer',
                style: TextStyle(color: Colors.white, fontSize: 20)),
            SizedBox(height: 10.0),
            Text('Branches',
                style: TextStyle(color: Colors.white, fontSize: 20)),
          ],
        )
    );
  }

  Widget dashboard(context) {
    return  AnimatedPositioned(
      duration:duration,
      top:isCollapsed?0:0.2*screenHeight,
      bottom: isCollapsed?0:0.2*screenWidth,
      left:isCollapsed?0: 0.6* screenWidth,
      right:isCollapsed?0: -0.4 * screenWidth,
      child: Material(
        animationDuration: const Duration(milliseconds: 3000),
        borderRadius: BorderRadius.all(Radius.circular(0)),
        elevation: 8,
        color: backgroundColor,
        child: Container(
          padding: const EdgeInsets.only(left:16,top: 48),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  InkWell(borderRadius:BorderRadius.circular(10), child:Icon(Icons.menu, color: Colors.white),onTap: (){
                    setState(() {
                      isCollapsed = !isCollapsed;
                    });
                  },),
                  Text("My cards",
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                  Icon(Icons.settings, color: Colors.white),
                ],
              ),
              SizedBox(height: 50,),
              Container(
                height:600,
                child: PageView(
                  controller: PageController(viewportFraction: 0.8),
                  scrollDirection: Axis.horizontal,
                  pageSnapping: true,
                  children: <Widget>[
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 8),
                      color:Colors.redAccent,
                      width:100
                    ),
                    Container(
                        margin: const EdgeInsets.symmetric(horizontal: 8),
                        color:Colors.blueAccent,
                        width:100
                    ),
                    Container(
                        margin: const EdgeInsets.symmetric(horizontal: 8),
                        color:Colors.greenAccent,
                        width:100
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
